import {messages} from "share/common";
import React, { Component } from 'react'
import { Modal, Button } from 'antd'
import { unstable_renderSubtreeIntoContainer } from 'react-dom'
import 'styles/components/mul-modal.scss'

/**
 * 因为modal绑定的div是在原组件库生成的，所以不好用ReactDom里的方法操控，放弃函数操纵组件方式
 * 实现原理：cacheIndex存每个content放在div中的位置，来实现动画滑动区域多少
 * 本可以用hook管理index变量 但是content内容中要修改index必须要用useRef
 * 公版本升级以后可修改
 */

class MulModal extends Component {

  state = {
    index: 0,
    cacheIndex: [0]
  };

  componentDidMount () {
    const { onRef } = this.props;
    onRef && onRef(this);
  }

  changeIndex = num => {
    const { cacheIndex } = this.state;
    const { content } = this.props;
    let position = cacheIndex.indexOf(num);
    let divContent = document.querySelector('.mul-modal-content');
    if (position > -1) {
      if (num !== 0) {
        divContent.removeChild(document.querySelector(`.content-item-${num}`));
        let frag = document.createDocumentFragment();
        unstable_renderSubtreeIntoContainer(this, React.createElement('div', {
          className: `content-item content-item-${num}`
        }, content[num]), frag);
        divContent.appendChild(frag);
      }
      divContent.style.transform = "translateX("+ - 720 * num + "px)";
    } else {
      let frag = document.createDocumentFragment();
      unstable_renderSubtreeIntoContainer(this, React.createElement('div', {
        className: `content-item content-item-${num}`
      }, content[num]), frag);
      divContent.appendChild(frag);
      cacheIndex.push(num);
      divContent.style.transform = "translateX("+ - 720 * (cacheIndex.length - 1) + "px)";
    }
    this.setState({ index: num, cacheIndex })
  };

  afterClose = () => {
    const { afterClose } = this.props;
    this.setState({
      index: 0,
      cacheIndex: [0]
    });
    afterClose && afterClose();
  };

  render() {
    const { props: { onOkArray = [], onCancel, confirmLoadingArray = [], okTextArray = [], content,
      className, destroyOnClose = true, visible } } = this;
    const { index } = this.state;
    let extraProps = {};
    content && (extraProps.footer = [
        index === 0 ? null : (
          <Button
            type='primary'
            onClick={() => this.changeIndex(index - 1)}
            style={{float: 'left'}}
          >
            {messages('common-1.key81')/*上一步*/}
          </Button>
        ),
        <Button onClick={onCancel}>{messages('common.cancel')/*取消*/}</Button>,
        <Button
          type='primary'
          onClick={onOkArray[index]}
          loading={confirmLoadingArray && !!confirmLoadingArray[index]}
        >{okTextArray[index] || messages('common.ok')/*确定*/}</Button>
      ]);
    return (
      <Modal
        {...this.props}
        afterClose={this.afterClose}
        {...extraProps}
        wrapClassName={'body-mul-modal'}
        width={760}
        className={`mul-modal ${className || ''}`}
      >
        {
          visible || !destroyOnClose ? (
            <div className={'mul-modal-flex'}>
              <div className={'mul-modal-content modal-content-animated'}>
                <div className={'content-item'}>
                  {content ? content[0] : this.props.children}
                </div>
              </div>
            </div>
          ) : <div className={'blank'}/>
        }
      </Modal>
    )
  }

}

export default MulModal
